// Offcanvas Mixins

@mixin e-offcanvas-base($class, $layout) {
	$width: e-get($layout, self, width);
	$transition: left .3s ease, right .3s ease;

	// Base
	.#{$class} {
		//display: block !important;
		z-index: e-get($layout, self, zindex);
		position: fixed;
		-webkit-overflow-scrolling: touch;
		top: 0;
		bottom: 0;
		overflow-y: auto; 				
		-webkit-transform: translate3d(0, 0, 0);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		width: $width !important;
		transition: $transition;
		left: -($width + 20px);

		&.#{$class}--on {			
			transition: $transition;
			left: 0;
		}

		@include e-hack-ie {
			transition: none !important;
		}
	}

	// Pull from right
	.#{$class}--right {
		.#{$class} {
			right: -($width + 20px);
			left: auto;

			&.#{$class}--on {			
				transition: $transition;
				right: 0;
				left: auto;
			}
		}
	}

	// Close icon
	@if e-get($layout, close) != null {
		// Mobile close button
		.#{$class}-close {
			width:  e-get($layout, close, size);
			height: e-get($layout, close, size);
			top: 1px;
			z-index: e-get($layout, self, zindex) + 1;
			transition: $transition;
			position: fixed;
			border: 0;
			box-shadow: none;
			@include e-rounded {
				border-radius: 3px; 
			}			
			cursor: pointer;
			outline: none !important;
			display: flex;
			justify-content: center;
			align-items: center;

			@include e-hack-ie {
				transition: none !important;
			}

			> i {					
				line-height: 0;
				font-size: e-get($layout, close, font-size);
			}

			&:hover {
				text-decoration: none;
			}

			left: - (e-get($layout, close, size));

			// Pull from right
			.#{$class}--right & {
				left: auto;
				right: - (e-get($layout, close, size));
			}

			.#{$class}--on & {			
				transition: $transition;
				left: $width - e-get($layout, close, size) - 1px;
			}

			// Pull from right
			.#{$class}--on.#{$class}--right & {
				left: auto;
				right: $width - e-get($layout, close, size) - 1px;
			}
		}
	}

	// Overlay
	.#{$class}-overlay {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		overflow: hidden;
		z-index: e-get($layout, self, zindex) - 1;
		background: rgba(#000000, .1);
		animation: e-animate-fade-in .3s linear 1;
	}
}

@mixin e-offcanvas-skin($class, $skin) {
	.#{$class} {
		@if (e-has($skin, self, bg-color)) {
			background: e-get($skin, self, bg-color);
		}

		@if (e-has($skin, self, shadow)) {
			box-shadow: e-get($skin, self, shadow);
		}
	}

	.#{$class}-overlay {
		background: e-get($skin, overlay, bg-color);
	}

	@if (e-has($skin, close)) {
		.#{$class}-close {
			background-color: e-get($skin, close, bg-color, default);

			> i {
				color: e-get($skin, close, icon-color, default);
			}

			&:hover {
				background-color: e-get($skin, close, bg-color, hover);

				> i {
					color: e-get($skin, close, icon-color, hover);
				}
			}
		}
	}
}

@mixin e-offcanvas-build($class, $mode, $config) {
	// close icon
	.#{$class}-close {
		display: none;
	}

	@if $mode == default {
		@include e-offcanvas-base($class, e-get($config, layout));
		@include e-offcanvas-skin($class, e-get($config, skin));
	}

	@if $mode == desktop {
		@include e-desktop {
			@include e-offcanvas-base($class, e-get($config, layout));
			@include e-offcanvas-skin($class, e-get($config, skin));
		}
	}

	@if $mode == desktop-and-tablet {
		@include e-desktop-and-tablet {
			@include e-offcanvas-base($class, e-get($config, layout));
			@include e-offcanvas-skin($class, e-get($config, skin));
		}
	}

	@if $mode == tablet {
		@include e-tablet {
			@include e-offcanvas-base($class, e-get($config, layout));
			@include e-offcanvas-skin($class, e-get($config, skin));
		}
	}

	@if $mode == tablet-and-mobile {
		@include e-tablet-and-mobile {
			@include e-offcanvas-base($class, e-get($config, layout));
			@include e-offcanvas-skin($class, e-get($config, skin));
		}
	}

	@if $mode == mobile {
		@include e-mobile {
			@include e-offcanvas-base($class, e-get($config, layout));
			@include e-offcanvas-skin($class, e-get($config, skin));
		}
	}

	@include e-responsive-below(e-get($config, layout, self, width) + 50px) {
		.#{$class} {
			width: 90% !important;
		}
	}
}